<template>
	<view class="page">
		<view class="header-section">
			<view class="header-content">
				<view class="title">特色工具</view>
				<view class="subtitle">有趣实用的特色功能</view>
			</view>
		</view>
		
		<view class="tools-section">
			<view class="section-header">
				<text class="section-title">🎨 文字创作</text>
			</view>
			<view class="tools-grid">
				<!-- 文字云生成 -->
				<view class="grid-item featured" @click="toWordCloud">
					<image src="../../static/images/common/settings.png" class="grid-icon"></image>
					<text class="grid-title">文字云生成</text>
					<text class="grid-desc">制作精美文字云</text>
					<view class="featured-badge">新功能</view>
				</view>
				
				<!-- 个人标签云 -->
				<view class="grid-item" @click="toPersonalTagCloud">
					<image src="../../static/images/home/subtitle.svg" class="grid-icon"></image>
					<text class="grid-title">个人标签云</text>
					<text class="grid-desc">多层次标签图</text>
				</view>
				
				<!-- 励志海报 -->
				<view class="grid-item" @click="toMotivationalPoster">
					<image src="../../static/images/home/subtitle.svg" class="grid-icon"></image>
					<text class="grid-title">励志海报</text>
					<text class="grid-desc">制作励志名言</text>
				</view>
				
				<!-- 滚动字幕 -->
				<view class="grid-item" @click="toMarquee">
					<image src="@/static/images/home/zimu.svg" class="grid-icon"></image>
					<text class="grid-title">滚动字幕</text>
					<text class="grid-desc">制作动态字幕</text>
				</view>
			</view>
			
			<view class="section-header">
				<text class="section-title">🎲 趣味生成</text>
			</view>
			<view class="tools-grid">
				<!-- 星座运势图 -->
				<view class="grid-item" @click="toHoroscopeGen">
					<image src="../../static/images/common/settings.png" class="grid-icon"></image>
					<text class="grid-title">星座运势图</text>
					<text class="grid-desc">生成星座运势</text>
				</view>
				
				<!-- 颜值打分器 -->
				<view class="grid-item" @click="toBeautyScore">
					<image src="../../static/images/common/settings.png" class="grid-icon"></image>
					<text class="grid-title">颜值打分器</text>
					<text class="grid-desc">AI颜值评测</text>
				</view>
				
				<!-- 倒计时图片 -->
				<view class="grid-item" @click="toCountdownGen">
					<image src="../../static/images/common/settings.png" class="grid-icon"></image>
					<text class="grid-title">倒计时图片</text>
					<text class="grid-desc">制作倒计时</text>
				</view>
				
				<!-- 成就图生成 -->
				<view class="grid-item" @click="toAchievementGen">
					<image src="../../static/images/common/settings.png" class="grid-icon"></image>
					<text class="grid-title">成就图生成</text>
					<text class="grid-desc">制作进度图</text>
				</view>
				
				<!-- 节日贺卡 -->
				<view class="grid-item" @click="toHolidayCard">
					<image src="../../static/images/common/settings.png" class="grid-icon"></image>
					<text class="grid-title">节日贺卡</text>
					<text class="grid-desc">制作节日贺卡</text>
				</view>
				
				<!-- 心情日记 -->
				<view class="grid-item" @click="toMoodDiary">
					<image src="../../static/images/home/poster.svg" class="grid-icon"></image>
					<text class="grid-title">心情日记</text>
					<text class="grid-desc">记录美好心情</text>
				</view>
			</view>
			
			<view class="section-header">
				<text class="section-title">💼 个人展示</text>
			</view>
			<view class="tools-grid">
				<!-- 名片生成 -->
				<view class="grid-item featured" @click="toBusinessCard">
					<image src="../../static/images/common/settings.png" class="grid-icon"></image>
					<text class="grid-title">名片生成</text>
					<text class="grid-desc">制作个性名片</text>
					<view class="featured-badge">热门</view>
				</view>
				
				<!-- 个人介绍 -->
				<view class="grid-item" @click="toPersonalIntro">
					<image src="../../static/images/home/poster.svg" class="grid-icon"></image>
					<text class="grid-title">个人介绍</text>
					<text class="grid-desc">制作介绍卡片</text>
				</view>
				
				<!-- 学历生成 -->
				<view class="grid-item" @click="toEducationCert">
					<image src="../../static/images/common/settings.png" class="grid-icon"></image>
					<text class="grid-title">学历生成</text>
					<text class="grid-desc">制作学历证书</text>
				</view>
				
				<!-- 今日收获 -->
				<view class="grid-item" @click="toDailyGains">
					<image src="../../static/images/home/subtitle.svg" class="grid-icon"></image>
					<text class="grid-title">今日收获</text>
					<text class="grid-desc">记录每日成长</text>
				</view>
			</view>
			
			<view class="section-header">
				<text class="section-title">🎯 生活记录</text>
			</view>
			<view class="tools-grid">
				<!-- 每周总结 -->
				<view class="grid-item" @click="toWeeklySummary">
					<image src="../../static/images/home/poster.svg" class="grid-icon"></image>
					<text class="grid-title">每周总结</text>
					<text class="grid-desc">制作周报卡片</text>
				</view>
				
				<!-- 读书笔记 -->
				<view class="grid-item" @click="toBookNotes">
					<image src="../../static/images/common/settings.png" class="grid-icon"></image>
					<text class="grid-title">读书笔记</text>
					<text class="grid-desc">分享读书心得</text>
				</view>
				
				<!-- 打卡签到 -->
				<view class="grid-item" @click="toCheckIn">
					<image src="../../static/images/home/subtitle.svg" class="grid-icon"></image>
					<text class="grid-title">打卡签到</text>
					<text class="grid-desc">记录坚持习惯</text>
				</view>
				
				<!-- 目标规划 -->
				<view class="grid-item" @click="toGoalPlanning">
					<image src="../../static/images/common/settings.png" class="grid-icon"></image>
					<text class="grid-title">目标规划</text>
					<text class="grid-desc">制作目标清单</text>
				</view>
			</view>
			
			<view class="section-header">
				<text class="section-title">💕 情感世界</text>
			</view>
			<view class="tools-grid">
				<!-- 恋爱日记 -->
				<view class="grid-item featured" @click="toLoveDiary">
					<image src="../../static/images/home/poster.svg" class="grid-icon"></image>
					<text class="grid-title">恋爱日记</text>
					<text class="grid-desc">记录甜蜜时光</text>
					<view class="featured-badge">热门</view>
				</view>
				
				<!-- 舔狗日记 -->
				<view class="grid-item" @click="toLickDogDiary">
					<image src="../../static/images/home/subtitle.svg" class="grid-icon"></image>
					<text class="grid-title">舔狗日记</text>
					<text class="grid-desc">专属表白神器</text>
				</view>
				
				<!-- 表白卡片 -->
				<view class="grid-item" @click="toConfessionCard">
					<image src="../../static/images/common/settings.png" class="grid-icon"></image>
					<text class="grid-title">表白卡片</text>
					<text class="grid-desc">浪漫表白制作</text>
				</view>
				
				<!-- 纪念日 -->
				<view class="grid-item" @click="toAnniversary">
					<image src="../../static/images/home/poster.svg" class="grid-icon"></image>
					<text class="grid-title">纪念日</text>
					<text class="grid-desc">特殊日子记录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			// 文字云生成
			toWordCloud() {
				uni.navigateTo({
					url: '/subPackages/imageTools/wordCloud/wordCloud'
				})
			},
			
			// 个人标签云
			toPersonalTagCloud() {
				uni.navigateTo({
					url: '/subPackages/imageTools/personalTagCloud/personalTagCloud'
				})
			},
			
			// 励志海报
			toMotivationalPoster() {
				uni.navigateTo({
					url: '/subPackages/imageTools/motivationalPoster/motivationalPoster'
				})
			},
			
			// 滚动字幕
			toMarquee() {
				uni.navigateTo({
					url: '/subPackages/effects/marquee/marquee'
				})
			},
			
			// 星座运势图
			toHoroscopeGen() {
				uni.navigateTo({
					url: '/subPackages/imageTools/horoscopeGen/horoscopeGen'
				})
			},
			
			// 颜值打分器
			toBeautyScore() {
				this.selectImage('beautyScore')
			},
			
			// 倒计时图片
			toCountdownGen() {
				uni.navigateTo({
					url: '/subPackages/imageTools/countdownGen/countdownGen'
				})
			},
			
			// 成就图生成
			toAchievementGen() {
				uni.navigateTo({
					url: '/subPackages/imageTools/achievementGen/achievementGen'
				})
			},
			
			// 节日贺卡
			toHolidayCard() {
				uni.navigateTo({
					url: '/subPackages/imageTools/holidayCard/holidayCard'
				})
			},
			
			// 心情日记
			toMoodDiary() {
				uni.navigateTo({
					url: '/subPackages/imageTools/moodDiary/moodDiary'
				})
			},
			
			// 名片生成
			toBusinessCard() {
				uni.navigateTo({
					url: '/subPackages/imageTools/businessCard/businessCard'
				})
			},
			
			// 个人介绍
			toPersonalIntro() {
				uni.navigateTo({
					url: '/subPackages/imageTools/personalIntro/personalIntro'
				})
			},
			
			// 学历生成
			toEducationCert() {
				uni.navigateTo({
					url: '/subPackages/imageTools/educationCert/educationCert'
				})
			},
			
			// 今日收获
			toDailyGains() {
				uni.navigateTo({
					url: '/subPackages/imageTools/dailyGains/dailyGains'
				})
			},
			
			// 每周总结
			toWeeklySummary() {
				uni.navigateTo({
					url: '/subPackages/imageTools/weeklySummary/weeklySummary'
				})
			},
			
			// 读书笔记
			toBookNotes() {
				uni.navigateTo({
					url: '/subPackages/imageTools/bookNotes/bookNotes'
				})
			},
			
			// 打卡签到
			toCheckIn() {
				uni.navigateTo({
					url: '/subPackages/imageTools/checkIn/checkIn'
				})
			},
			
			// 目标规划
			toGoalPlanning() {
				uni.navigateTo({
					url: '/subPackages/imageTools/goalPlanning/goalPlanning'
				})
			},
			
			// 恋爱日记
			toLoveDiary() {
				uni.navigateTo({
					url: '/subPackages/imageTools/loveDiary/loveDiary'
				})
			},
			
			// 舔狗日记
			toLickDogDiary() {
				uni.navigateTo({
					url: '/subPackages/imageTools/lickDogDiary/lickDogDiary'
				})
			},
			
			// 表白卡片
			toConfessionCard() {
				uni.navigateTo({
					url: '/subPackages/imageTools/confessionCard/confessionCard'
				})
			},
			
			// 纪念日
			toAnniversary() {
				uni.navigateTo({
					url: '/subPackages/imageTools/anniversary/anniversary'
				})
			},
			
			// 选择图片并跳转到对应功能
			selectImage(toolName) {
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePath = res.tempFiles[0].tempFilePath
						uni.navigateTo({
							url: `/subPackages/imageTools/${toolName}/${toolName}?imageUrl=${encodeURIComponent(tempFilePath)}`
						})
					},
					fail: (err) => {
						console.log('选择图片失败:', err)
						uni.showToast({
							title: '请先选择图片',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.page {
	background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
	min-height: 100vh;
	padding-bottom: 120rpx;
}

.header-section {
	padding: 80rpx 40rpx 60rpx;
	text-align: center;
	color: #333;
	
	.title {
		font-size: 56rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	
	.subtitle {
		font-size: 28rpx;
		color: #666;
	}
}

.tools-section {
	padding: 0 30rpx;
	
	.section-header {
		margin: 40rpx 0 30rpx;
		
		.section-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
	}
	
	.tools-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 25rpx;
		margin-bottom: 40rpx;
		
		.grid-item {
			background: white;
			border-radius: 20rpx;
			padding: 40rpx 30rpx;
			text-align: center;
			box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
			transition: all 0.3s ease;
			position: relative;
			
			&:active {
				transform: translateY(5rpx);
				box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.2);
			}
			
			&.featured {
				background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
				color: white;
				
				.grid-title, .grid-desc {
					color: white;
				}
			}
			
			.grid-icon {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 20rpx;
			}
			
			.grid-title {
				display: block;
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 10rpx;
			}
			
			.grid-desc {
				display: block;
				font-size: 24rpx;
				color: #666;
				line-height: 1.4;
			}
			
			.featured-badge {
				position: absolute;
				top: 15rpx;
				right: 15rpx;
				background: linear-gradient(45deg, #ff6b6b, #feca57);
				color: white;
				font-size: 20rpx;
				padding: 8rpx 16rpx;
				border-radius: 20rpx;
				box-shadow: 0 3rpx 10rpx rgba(255, 107, 107, 0.3);
			}
		}
	}
}
</style>